<template>
    <div style="padding:20px 20px;margin-bottom: 30px">
        <div class="mineSend"><h3>我参与的</h3></div>
        <van-empty description="暂时没有参与的内容！！" v-if="isContent"/>
            <ul v-else>
                <li v-for="(item,index) in list" :key="index">
                    <router-link :to="{path:'/detail',query:{postsId:item.postsId}}" tag="div">
                    <p>
                        <span>发帖时间</span>
                        <span style="float: right; color: gray">{{item.createTime}}</span>
                    </p>
                    <div style="clear: both"></div>
                    <h2>{{item.title}}</h2>
                    <div>
                        <p>{{item.intro}}</p>
                        <p><img :src="item.coverImgUrl" alt=""></p>
                        <span>来自 &nbsp;&nbsp; {{item.userName}}</span>
                        <span style="float: right"><van-icon name="thumb-circle-o" style="font-size: 20px" />&nbsp;&nbsp;{{item.zan}}</span>
                    </div>
                    </router-link>

                </li>
            </ul>
    </div>
</template>

<script>
    import { participate} from "../api/api";

    export default {
        name: "Minelist",
        data() {
            return {
                isContent:true,
                list: [],
            };
        },
        methods: {
        },
        created() {
            //我参与与的
            participate().then(res=>{
                console.log(res)
                if(res.data.code==0){
                    this.list=res.data.rows.reverse();
                    if(this.list.length==0){
                        this.isContent=true;
                    }else{
                        this.isContent=false;
                    }
                    console.log(this.list)
                }
            })
        }
    }
</script>

<style scoped>
    ul>li {
        padding-bottom: 10px;
        border-bottom: 1px solid gray;
    }
    ul>li>h2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    ul>li p {
        font-size: 15px;
    }
    ul img {
        width: 200px;
        height: 200px;
    }
    .mineSend{
        margin-left: -10px;
        padding: 10px 10px;
        border-radius: 10px 10px 10px 0;
        box-shadow: -2px -2px 2px #ccc;
    }
</style>